<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<%@page import="login.UserModel"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", -1);
%>
<title>Update Candidate</title>
<link rel="stylesheet" type="text/css" href="css/FinalProjectCSS.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-combined.min.css">
<script type="text/javascript" src="validationWithJs.js"></script>
 <% UserModel usr = (UserModel)session.getAttribute("userLogin");
 	String fileName=(String)request.getAttribute("fileName");
	String photoPath=(String)request.getAttribute("photo");
	String uploadPath=(String)request.getAttribute("pathUploadResult");%>
	
<script type="text/javascript">
function selCity(){
	var city = document.getElementsByName('cModel.cityId')[0].value;
	onDataFilled(city, 'city');
	if(city!="Others"){
		document.getElementById('idCity').style.display ='none';	
	}
}

function flyToPage(task,nomor) {
	if(task=="uploadPhoto"){
	var valid=validateImage();
	}else{
		document.forms[0].task.value = task;
		document.forms[0].nomor.value = nomor;
		document.forms[0].submit();		
	}
	if(valid==true){
	document.forms[0].task.value = task;
	document.forms[0].nomor.value = nomor;
	document.forms[0].lastStatusForm.value = document.forms[0].elements['cModel.lastStatus'].value;
	document.forms[0].submit();
	}
}

function resetCandidate(task,id){
	document.forms[0].task.value = task;
	document.forms[0].elements['cModel.userId'].value = id;
	document.forms[0].submit();	
}

function validateImage() {
	var statusType = false;
	var statusSize = false;
	var statusDimension = false;
	
	var fsize = $('#photo')[0].files[0].size;

	if (fsize <= 5242880) {
		statusSize = true;
	}
	var _URL = window.URL || window.webkitURL;
	var file = $('#photo')[0].files[0];
	var img = new Image();
	img.src = _URL.createObjectURL(file);
	
	if(img.height > 227 || img.width > 151){
		statusDimension = true;
	}
	
	var extensions = new Array("jpeg", "jpg");
	var imageFile = document.forms[0].elements['photoFile'].value;
	var imageLength = imageFile.length;
	var pos = imageFile.lastIndexOf('.') + 1;

	var ext = imageFile.substring(pos, imageLength);

	var final_ext = ext.toLowerCase();

	for (i = 0; i < extensions.length; i++) {
		if (extensions[i] == final_ext) {
			statusType = true;
		}
	}

	if (statusType == true && statusSize == true) {
		return true;
	} else if (statusType == false) {
		window.alert("You must upload an image file with one of the following extensions: "
						+ extensions.join(', ') + ".");
	} else if (statusSize == false) {
		window.alert("You must upload an image file <= 5 MB");
	}else if(statusDimension == false){
		window.alert("You must upload an image file min. 4x6 cm");
	}else if (statusType != true || statusSize != true) {
		return false;
	}
}


function setSelectedImage(){
	var _URL = window.URL || window.webkitURL;
	var file = $('#photo')[0].files[0];
	var img = new Image();
	img.src = _URL.createObjectURL(file);

	<%if(photoPath!=null & uploadPath==null){%>
	var imgSaved = document.getElementById('savedImg').getAttribute('src');

	if(imgSaved!=null || imgSaved!=""){
		document.getElementById('savedImg').style.display='none';
		document.getElementById('selectImgAfterSaveDiv').style.display='';
		document.getElementById('selectImgAfterSave').src=img.src;
		document.getElementById('selectImgAfterSave').style.display='';
	}
	<%} else if(uploadPath!=null){%>
	var upload = document.getElementById('uploadImg').getAttribute('src');
	if(upload){

		document.getElementById('uploadImg').style.display='none';
		document.getElementById('selectImgAfterUploadDiv').style.display='';
		document.getElementById('selectImgAfterUpload').src=img.src;
		document.getElementById('selectImgAfterUpload').style.display='';
	}
	<%}else if(photoPath!=null && uploadPath!=null){ %>
	document.getElementById('noImgDiv').style.display='none';
	<%}else{%>
	document.getElementById('selectedImg').src=img.src;
	document.getElementById('selectedImgDiv').style.display='';
	<%}%>
	var str = document.forms[0].elements['photoFile'].value;
	var res = str.substr(str.lastIndexOf("\\")+1);
	<% if(fileName==null){ %>
	document.getElementById('imgName').value = res;	
	<%}%>
}


function doComboSchool() {
var status;
var school = document.getElementsByName('cModel.schoolId')[0].value;

if(school=="Others"){
	status=document.forms[0].selectOtherSchool.value="yes";
	document.getElementById('comboSchoolCity').style.display ='';
	document.getElementById('idSchoolName').style.display ='';
	document.getElementById('idSchoolCity1').style.display ='none';
	document.getElementById('schoolName').style.display='none';
	document.getElementById('isValidSchoolName').style.display='none';
	document.getElementById('schCity').style.display='none';
	document.getElementById('isValidSchCity').style.display='none';
	
}else{
	status=document.forms[0].selectOtherSchool.value="no";
	document.getElementById('idSchoolName').style.display ='none';
	document.getElementById('comboSchoolCity').style.display ='none';
	document.getElementById('idSchoolCity1').style.display ='none';
	document.getElementById('idSchoolCity1').value ='';
	document.getElementById('idSchoolCity2').value ='';
	document.getElementById('schoolName').style.display='none';
	document.getElementById('isValidSchoolName').style.display='none';
	document.getElementById('schCity').style.display='none';
	document.getElementById('isValidSchCity').style.display='none';
}
var task = 'comboSchool';
$.ajax({
    type: "POST",
    url: "/WebFinalProject/Candidate.do",
    data: "schoolId=" + school + "&task=" + task+"&selectOtherSchool=" + status,
    success: function(response){
        $('#City').html(response);
    },
    error: function(e){
        alert('Error: ' + e);
    }
});
}

function selOtherSchool(){
document.getElementById('idSchoolCity1').style.display ='none';
document.getElementById('idSchoolCity2').style.display ='none';
document.getElementById('idSchoolName').style.display ='';
document.getElementById('idSchoolName').value ='';
document.getElementById('comboSchoolCity').style.display ='';
document.getElementById('schoolName').style.display='none';
document.getElementById('isValidSchoolName').style.display='none';
}

function selSchoolCity(){
var schoolCity = document.getElementsByName('cModel.schoolCityId')[0].value;
if(schoolCity!="Others"){
	document.getElementById('idSchoolCity1').style.display ='none';
	document.getElementById('idSchoolCity2').style.display ='none';
	document.getElementById('schCity').style.display='none';
	document.getElementById('isValidSchCity').style.display='none';
}
}

function selOtherSchoolCity(){
document.forms[0].elements['cModel.schoolCity'].value="";
document.getElementById('idSchoolCity1').value="";
document.getElementById('idSchoolCity2').value="";
document.getElementById('idSchoolCity2').style.display ='';
document.getElementById('idSchoolCity1').style.display ='none';
document.getElementById('idCity').style.display ='none';
document.getElementById('schCity').style.display='none';
document.getElementById('isValidSchCity').style.display='none';

}
function cek(){

for(var i=1;i<=5;i++){		
	if(document.getElementById(''+i+'').checked){
		
		if(i==1 & document.getElementById('1').checked){
			document.forms[0].elements['cModel.lastStatus'].value='Technical Test';
		}
		
		if(i<2 & document.getElementById('2').checked){
			document.forms[0].elements['cModel.lastStatus'].value='Interview 1';
		}
		
		if(i<3 & document.getElementById('3').checked){
			document.forms[0].elements['cModel.lastStatus'].value='Interview 2';
		}
	
		if(i<4 & document.getElementById('4').checked){
			document.forms[0].elements['cModel.lastStatus'].value='Interview 3';
		}
	
		if(i<5 & document.getElementById('5').checked){
			document.forms[0].elements['cModel.lastStatus'].value='Accepted';
		}	
	}	
}
if(document.getElementById('5').checked==true){
	document.forms[0].elements['cModel.lastStatus'].value='Accepted';
	document.getElementById('acceptedDiv').style.display ='';
}else{
	document.getElementById('acceptedDiv').style.display ='none';
}
}

function cekSelGender(){
var select = document.getElementById("JK");

<%String gender1 = (String)request.getAttribute("gender");%>
var gender2='<%=gender1%>';

for (var i = 0; i < select.options.length; i++)
{
	if(select.options[i].value=='F'){
		if(gender2=='F'){
		select.options[i].selected = true;
		}
	}else{
		select.options[i].selected = true;
	}
}
}

function cekSelReligion(){
var select = document.getElementById("religion");

<%String religion1 = (String)request.getAttribute("religion");%>
var religion2='<%=religion1%>';

for (var i = 0; i < select.options.length; i++)
{
	if(select.options[i].value=='Moslem'){
		if(religion2=='Moslem'){
		select.options[i].selected = true;
		}
	}else if(select.options[i].value=='Buddha'){
		if(religion2=='Buddha'){
			select.options[i].selected = true;
			}
	}else if(select.options[i].value=='Catholic'){
		if(religion2=='Catholic'){
			select.options[i].selected = true;
		}
	}else if(select.options[i].value=='Protestant'){
		if(religion2=='Protestant'){
			select.options[i].selected = true;
		}
	}else if(select.options[i].value=='Hindu'){
		if(religion2=='Hindu'){
			select.options[i].selected = true;
		}
	}
}

}

function cekMaritalStatus(){
var select = document.getElementById("maritalStatus");

<%String maritalStatus1 = (String)request.getAttribute("maritalStatus");%>
var maritalStatus2='<%=maritalStatus1%>';

for (var i = 0; i < select.options.length; i++)
{
	if(select.options[i].value=='Married'){
		if(maritalStatus2=='Married'){
		select.options[i].selected = true;
		}
	}else if(select.options[i].value=='Single'){
		if(maritalStatus2=='Single'){
			select.options[i].selected = true;
			}
	}else if(select.options[i].value=='Widower'){
		if(maritalStatus2=='Widower'){
			select.options[i].selected = true;
		}
	}else if(select.options[i].value=='Widow'){
		if(maritalStatus2=='Widow'){
			select.options[i].selected = true;
		}
	}
}

}

function cekEduLevel(){
var select = document.getElementById("educationLevel");

<%String eduLevel1 = (String)request.getAttribute("eduLevel");%>
var eduLevel2='<%=eduLevel1%>';

for (var i = 0; i < select.options.length; i++)
{
	if(select.options[i].value=='S3'){
		if(eduLevel2=='S3'){
		select.options[i].selected = true;
		}
	}else if(select.options[i].value=='S2'){
		if(eduLevel2=='S2'){
			select.options[i].selected = true;
			}
	}else if(select.options[i].value=='S1'){
		if(eduLevel2=='S1'){
			select.options[i].selected = true;
		}
	}else if(select.options[i].value=='D4'){
		if(eduLevel2=='D4'){
			select.options[i].selected = true;
		}
	}else if(select.options[i].value=='D3'){
		if(eduLevel2=='D3'){
			select.options[i].selected = true;
		}
	}else if(select.options[i].value=='D2'){
		if(eduLevel2=='D2'){
			select.options[i].selected = true;
		}
	}else if(select.options[i].value=='D1'){
		if(eduLevel2=='D1'){
			select.options[i].selected = true;
		}
	}else if(select.options[i].value=='SMU'){
		if(eduLevel2=='SMU'){
			select.options[i].selected = true;
		}
	}else if(select.options[i].value=='SMK'){
		if(eduLevel2=='SMK'){
			select.options[i].selected = true;
		}
	}
}
}
function check(){
hideField();
cekSelGender();
cekSelReligion();
cekMaritalStatus();

var schoolId = document.forms[0].elements['cModel.schoolId'].value;
var schoolName = document.forms[0].elements['cModel.schoolName'].value;
var schoolCity = document.forms[0].elements['cModel.schoolCity'].value;
var schoolCityId = document.forms[0].elements['cModel.schoolCityId'].value;
var cityId = document.forms[0].elements['cModel.cityId'].value;
var city = document.forms[0].elements['cModel.city'].value;
var selOtherSch = document.forms[0].elements['selectOtherSchool'].value;

<%if("admin".equalsIgnoreCase(usr.getRole())){%>
if(document.forms[0].elements['cModel.techTestScore'].value=="" && document.forms[0].elements['cModel.techTestDate'].value==""){
document.getElementById("btnReset").disabled = true; 
}
<%}%>
if(selOtherSch == "no" && schoolId!=""){
	doComboSchool();
}
else if(selOtherSch=="" && schoolId!=""&&schoolName!=""&&schoolCity!=""&&schoolCityId==""){
	setDisplaySchoolByExistingData(schoolCity);
}else if((schoolId=="" || schoolId=="Others") && schoolName!="" && schoolCity!="" && schoolCityId!="" && schoolCityId!="Others"){
	setDisplayOtherSchName(schoolCityId,schoolName);
	document.getElementById('idSchoolCity1').value = null;
	document.getElementById('idSchoolCity1').style.display ='none';
}else if((schoolId=="" || schoolId=="Others") && schoolName!="" && schoolCity!="" && (schoolCityId==""||schoolCityId=="Others")){
	setDisplayOtherSchName('Others',schoolName);
	document.getElementById('idSchoolCity1').style.display ='';
	document.getElementById('idSchoolCity1').value = schoolCity;
}

if((cityId==""||cityId=="Others") && city!=""){
	document.getElementById('idCity').style.display ='';
	document.getElementById('idCity').value = city;
	document.getElementsByName('cModel.cityId')[0].value="Others";
}

if(document.forms[0].elements['cModel.lastStatus'].value!="No Status"){
	
var status = document.forms[0].elements['cModel.lastStatus'].value;

var stat=new Array("Technical Test","Interview 1","Interview 2","Interview 3","Accepted");

for(var i=0;i<stat.length;i++){
	
	if(stat[i]==status){
		var id=i+1;
		if(id==1){
		document.getElementById(''+id+'').checked=true;
		}else if(id>1){
			for(var j=1;j<=id;j++){
				document.getElementById(''+j+'').checked=true;
			}
		}
	}
}
}
}

function setDisplayOtherSchName(idSchoolCity,idSchoolName){
document.getElementsByName('cModel.schoolId')[0].value = 'Others';	
document.getElementsByName('cModel.schoolId')[0].style.display ='';
document.getElementById('idSchoolName').value = idSchoolName;
document.getElementById('idSchoolName').style.display ='';
document.getElementById('comboSchoolCity').style.display ='';
document.getElementsByName('cModel.schoolCityId')[0].value= idSchoolCity;
}

function setDisplaySchoolByExistingData(val){
document.getElementById('idSchoolCity1').value = val;
document.getElementById('idSchoolCity1').style.display ='';
document.getElementById('idSchoolCity1').readOnly = true;
}

function selOtherCity(){
document.getElementById('idCity').value='';
document.getElementById('idCity').style.display ='';
document.getElementById('city').style.display ='none';
document.getElementById('isValidCity').style.display ='none';
}

function update(){
<%if("candidate".equalsIgnoreCase(usr.getRole())){%>

	if(validateFormCand()==true && validateForm()==true){
		var update = confirm("Do you really want to update data ? ");
		if (update == true) {
			
			if (document.getElementsByName('cModel.cityId')[0].value == "Others" && document.forms[0].elements['cModel.city'].value!="") {
				document.forms[0].selectOtherCity.value = "yes";
			}
			
			if(document.getElementsByName('cModel.schoolId')[0].value == "Others" && document.getElementById('idSchoolCity2').value=="null"){
				document.forms[0].elements['cModel.schoolCity'].value = document.getElementById('idSchoolCity1').value;
				document.forms[0].selectOtherSchCity.value = "yes";
			}		
			
			if ((document.getElementsByName('cModel.schoolId')[0].value=="Others") && (document.getElementsByName('cModel.schoolCityId')[0].value == "Others" || document.forms[0].elements['cModel.schoolCity'].value!="")) {
				document.forms[0].selectOtherSchCity.value = "yes";
			}
			
			if(document.forms[0].elements['cModel.schoolName'].value!="" && document.getElementsByName('cModel.schoolId')[0].value=="Others"){
				document.forms[0].selectOtherSchool.value = "yes";
			}
			document.forms[0].elements['cModel.birthDte'].value = document.getElementById('birthDate').value;

			if(document.getElementById('filePhoto').value!=""){
			
					if(document.getElementById('pathPhoto').value!=""&&document.getElementById('pathPhoto').value!=null&&document.getElementById('pathPhoto').value!="null"){
					document.forms[0].elements['cModel.photo'].value = document.getElementById('pathPhoto').value;
					}
				}
	
			document.forms[0].task.value = "updateCandidate";
			document.forms[0].submit();
		}
	}
<%}else{%>
	if(document.getElementById('5').checked==false){

		if(validateForm()==true){
			
			var update = confirm("Do you really want to update data ? ");
			if (update == true) {
			if (document.getElementsByName('cModel.cityId')[0].value == "Others" && document.forms[0].elements['cModel.city'].value!="") {
				document.forms[0].selectOtherCity.value = "yes";
			}
			if(document.getElementsByName('cModel.schoolId')[0].value == "Others" && document.getElementById('idSchoolCity2').value=="null"){
				document.forms[0].elements['cModel.schoolCity'].value = document.getElementById('idSchoolCity1').value;
				document.forms[0].selectOtherSchCity.value = "yes";
			}		
			
			if ((document.getElementsByName('cModel.schoolId')[0].value=="Others") && (document.getElementsByName('cModel.schoolCityId')[0].value == "Others" || document.forms[0].elements['cModel.schoolCity'].value!="")) {
				document.forms[0].selectOtherSchCity.value = "yes";
			}
			
			if(document.forms[0].elements['cModel.schoolName'].value!="" && document.getElementsByName('cModel.schoolId')[0].value=="Others"){
				document.forms[0].selectOtherSchool.value = "yes";
			}
			document.forms[0].elements['cModel.birthDte'].value = document.getElementById('birthDate').value;

			if(document.getElementById('filePhoto').value!=""){
				if(document.getElementById('pathPhoto').value!=""&&document.getElementById('pathPhoto').value!=null&&document.getElementById('pathPhoto').value!="null"){
				document.forms[0].elements['cModel.photo'].value = document.getElementById('pathPhoto').value;
				}
			}
		
			document.forms[0].task.value = "updateCandidate";
			document.forms[0].submit();
			}
		}
	}else if(document.getElementById('5').checked==true){

		if(validateFormCand()==false){
		document.getElementById('alertAdminAcc').style.display ='';
		document.getElementById('alertAdmin').style.display ='none';
		}
		if(validateFormCand()==true && validateForm()==true){
			var update = confirm("Do you really want to update data ? ");
			if (update == true) {
			if (document.getElementsByName('cModel.cityId')[0].value == "Others" && document.forms[0].elements['cModel.city'].value!="") {
				document.forms[0].selectOtherCity.value = "yes";
			}

			if(document.getElementsByName('cModel.schoolId')[0].value == "Others" && document.getElementById('idSchoolCity2').value=="null"){
				document.forms[0].elements['cModel.schoolCity'].value = document.getElementById('idSchoolCity1').value;
				document.forms[0].selectOtherSchCity.value = "yes";
			}		
			
			if ((document.getElementsByName('cModel.schoolId')[0].value=="Others") && (document.getElementsByName('cModel.schoolCityId')[0].value == "Others" || document.forms[0].elements['cModel.schoolCity'].value!="")) {
				document.forms[0].selectOtherSchCity.value = "yes";
			}
			
			if(document.forms[0].elements['cModel.schoolName'].value!="" && document.getElementsByName('cModel.schoolId')[0].value=="Others"){
				document.forms[0].selectOtherSchool.value = "yes";
			}
			document.forms[0].elements['cModel.birthDte'].value = document.getElementById('birthDate').value;

				if(document.getElementById('filePhoto').value!=""){
					if(document.getElementById('pathPhoto').value!=""&&document.getElementById('pathPhoto').value!=null&&document.getElementById('pathPhoto').value!="null"){
					document.forms[0].elements['cModel.photo'].value = document.getElementById('pathPhoto').value;
					}
				}
			document.forms[0].task.value = "updateCandidate";
			document.forms[0].submit();
			}
		}
	}
<%}%>
}

function hideField(){
document.getElementById('gender').style.display='none';
document.getElementById('birthPlace').style.display = 'none';
document.getElementById('isValidBirthPlce').style.display = 'none';
document.getElementById('religionDt').style.display = 'none';
document.getElementById('phoneNumber').style.display = 'none';
document.getElementById('idSchoolName').style.display ='none';
document.getElementById('comboSchoolCity').style.display ='none';
document.getElementById('idCity').style.display ='none';
document.getElementById('idSchoolCity1').style.display ='';
document.getElementById('idSchoolCity2').style.display ='none';
document.getElementById('address').style.display='none';
document.getElementById('gpa').style.display='none';
document.getElementById('isValidGpa').style.display='none';
document.getElementById('city').style.display='none';
document.getElementById('isValidCity').style.display='none';
document.getElementById('major').style.display='none';
document.getElementById('isValidMajor').style.display='none';
document.getElementById('schCity').style.display='none';
document.getElementById('isValidSchCity').style.display='none';
document.getElementById('schoolName').style.display='none';
document.getElementById('isValidSchoolName').style.display='none';
document.getElementById('gradYear').style.display='none';
document.getElementById('isValidGradYear').style.display='none';
document.getElementById('province').style.display='none';
document.getElementById('isValidProvince').style.display='none';
document.getElementById('country').style.display='none';
document.getElementById('isValidCountry').style.display='none';
document.getElementById('postalCode').style.display='none';
document.getElementById('isValidPostalCode').style.display='none';
document.getElementById('marital').style.display='none';
document.getElementById('idCardNum1').style.display = 'none';
document.getElementById('idCardNum2').style.display = 'none';
document.getElementById('fullName').style.display = 'none';
document.getElementById('isValidFullName').style.display = 'none';
<%if("admin".equalsIgnoreCase(usr.getRole())){%>
document.getElementById('isValidTechPlc').style.display = 'none';
document.getElementById('isValidTechScore').style.display = 'none';
document.getElementById('batchId').style.display='none';
document.getElementById('acceptedDiv').style.display ='none';
document.getElementById('alertAdminAcc').style.display ='none';
document.getElementById('alertHasRegistered').style.display = 'none';
<%}%>
document.getElementById('birthDt').style.display = 'none';
document.getElementById('email').style.display = 'none';
document.getElementById('isValidEmail').style.display = 'none';
document.getElementById('educLevel').style.display = 'none';
document.getElementById('mobileNumber').style.display = 'none';
document.getElementById('isValidMobile').style.display = 'none';
document.getElementById('isValidPhone').style.display = 'none';
document.getElementById('foto').style.display='none';
document.getElementById('selectedImgDiv').style.display='none';
//document.getElementById('selectImgAfterSaveDiv').style.display='none';
<%-- <%if(uploadPath!=null){ %> --%>
// document.getElementById('selectImgAfterUploadDiv').style.display='none';
<%-- <%}%> --%>
<%if("candidate".equalsIgnoreCase(usr.getRole())){%>
document.getElementById('alertCanHasRegistered').style.display = 'none';
<%}%>
}

function validateFormCand(){	
<% String ft = (String)request.getAttribute("photo"); %>  
var fotoPath='<%=ft%>';

<% String uploadFt = (String)request.getAttribute("pathUploadResult"); %>  
var uploadPath='<%=uploadFt%>';

var gndr = document.forms[0].elements['cModel.gender'].value;
var birthPlc = document.forms[0].elements['cModel.birthPlace'].value;
var religionDt = document.forms[0].elements['cModel.religion'].value;
var marital = document.forms[0].elements['cModel.maritalStatus'].value;
var addr = document.forms[0].elements['cModel.address'].value;
var postCd = document.forms[0].elements['cModel.postalCode'].value;
var cityDt = document.forms[0].elements['cModel.city'].value;
var cityIdDt = document.forms[0].elements['cModel.cityId'].value;
var prov = document.forms[0].elements['cModel.province'].value;
var cntry = document.forms[0].elements['cModel.country'].value;
var phone = document.forms[0].elements['cModel.phoneNumber'].value;
var grad = document.forms[0].elements['cModel.gradYear'].value;
var schName = document.forms[0].elements['cModel.schoolName'].value;
var schId = document.forms[0].elements['cModel.schoolId'].value;
var schCityCombo = document.getElementById('idSchoolCity1').value;
var schCity = document.forms[0].elements['cModel.schoolCity'].value;
var schOtherCity = document.getElementById('idSchoolCity2').value;
var schCityId = document.forms[0].elements['cModel.schoolCityId'].value;
var major = document.forms[0].elements['cModel.majority'].value;
var gpaDt = document.forms[0].elements['cModel.gpa'].value;

<%if("admin".equalsIgnoreCase(usr.getRole())){%>

if(document.getElementById('5').checked==true){
	
	var batchId = document.forms[0].elements['cModel.batchId'].value;
	if(batchId==null || batchId=="" || birthPlc==null || birthPlc==""  
	||gpaDt==null || gpaDt=="" || ((schName==null || schName=="")&&(schId==null||schId=="")) ||major==null || major==""){

		if (batchId==null || batchId==""){
 			document.getElementById('batchId').style.display='';
 		}
		if (birthPlc==null || birthPlc==""){
 			document.getElementById('birthPlace').style.display='';
 		}
		if (gpaDt==null || gpaDt==""){
			document.getElementById('gpa').style.display='';
		}
		if ((schName==null || schName=="") && (schId==null || schId=="")){
			document.getElementById('schoolName').style.display='';
		}
		if (major==null || major==""){
			document.getElementById('major').style.display='';
		}
		return false;
	}else{
		return true;
	}
}else{
	
if(gndr==null || gndr=="" ||birthPlc==null || birthPlc=="" ||religionDt==null || religionDt=="" 
   || marital==null || marital=="" ||addr==null || addr==""
   ||postCd==null || postCd=="" ||((cityDt==null || cityDt=="") && (cityIdDt==null || cityIdDt==""))
   ||prov==null || prov==""||cntry==null || cntry=="" ||phone==null || phone==""
   ||grad==null || grad=="" ||((schName==null || schName=="")&&(schId==null||schId==""))
   ||((schCity==null || schCity=="") && (schCityId==null || schCityId=="")&&(schId==null||schId=="")) || major==null || major==""
   ||gpaDt==null || gpaDt=="" ||fotoPath==null || fotoPath==""){
	
	if ((fotoPath==null || fotoPath=="")&&(uploadPath==null|| uploadPath=="")){
			document.getElementById('foto').style.display='';
		}
	if (gndr==null || gndr==""){
		document.getElementById('gender').style.display='';
	}
	if (birthPlc==null || birthPlc==""){
			document.getElementById('birthPlace').style.display='';
		}
	if (religionDt==null || religionDt==""){
			document.getElementById('religionDt').style.display='';
		}
	if (marital==null || marital==""){
		document.getElementById('marital').style.display='';
	}
	if (addr==null || addr==""){
		document.getElementById('address').style.display='';		
	}
	if (postCd==null || postCd==""){
		document.getElementById('postalCode').style.display='';
	}
	if ((schCity==null || schCity=="") && (schCityId=="Others") && (schOtherCity==null || schOtherCity=="")){
		document.getElementById('schCity').style.display='';
	}
	if ((cityDt==null || cityDt=="") && (cityIdDt==null || cityIdDt=="")){
		document.getElementById('city').style.display='';
	}
	if ((schName==null || schName=="") && (schId==null || schId=="")){
		document.getElementById('schoolName').style.display='';
	}
	if ((cityDt==null || cityDt=="") && (cityIdDt=="Others")){
		document.getElementById('city').style.display='';
	}
	if ((schName==null || schName=="") && (schId=="Others")){
		document.getElementById('schoolName').style.display='';
	}
	if (prov==null || prov==""){
		document.getElementById('province').style.display='';
	}
	if (cntry==null || cntry==""){
		document.getElementById('country').style.display='';
	}
	if (phone==null || phone==""){
		document.getElementById('phoneNumber').style.display='';
	}
	if (grad==null || grad==""){
		document.getElementById('gradYear').style.display='';
	}
	if (major==null || major==""){
		document.getElementById('major').style.display='';
	}
	if (gpaDt==null || gpaDt==""){
		document.getElementById('gpa').style.display='';
	}
	return false;
	}else{
		return true;
	}	
}
<%}else{%>
if(gndr==null || gndr=="" ||birthPlc==null || birthPlc=="" ||religionDt==null || religionDt=="" 
	   || marital==null || marital=="" ||addr==null || addr==""
	   ||postCd==null || postCd=="" ||((cityDt==null || cityDt=="") && (cityIdDt==null || cityIdDt==""))
	   ||prov==null || prov==""||cntry==null || cntry=="" ||phone==null || phone==""
	   ||grad==null || grad=="" ||((schName==null || schName=="")&&(schId==null||schId==""))
	   ||((schCity==null || schCity=="") && (schCityId==null || schCityId=="")&&(schId==null||schId=="")) || major==null || major==""
	   ||gpaDt==null || gpaDt=="" ||fotoPath==null || fotoPath==""){
		
		if ((fotoPath==null || fotoPath=="")&&(uploadPath==null|| uploadPath=="")){
 			document.getElementById('foto').style.display='';
 		}
		if (gndr==null || gndr==""){
			document.getElementById('gender').style.display='';
		}
		if (birthPlc==null || birthPlc==""){
 			document.getElementById('birthPlace').style.display='';
 		}
		if (religionDt==null || religionDt==""){
 			document.getElementById('religionDt').style.display='';
 		}
		if (marital==null || marital==""){
			document.getElementById('marital').style.display='';
		}
		if (addr==null || addr==""){
			document.getElementById('address').style.display='';		
		}
		if (postCd==null || postCd==""){
			document.getElementById('postalCode').style.display='';
		}
		if ((schCity==null || schCity=="") && (schCityId=="Others") && (schOtherCity==null || schOtherCity=="")){
			document.getElementById('schCity').style.display='';
		}
		if ((cityDt==null || cityDt=="") && (cityIdDt==null || cityIdDt=="")){
			document.getElementById('city').style.display='';
		}
		if ((schName==null || schName=="") && (schId==null || schId=="")){
			document.getElementById('schoolName').style.display='';
		}
		if ((cityDt==null || cityDt=="") && (cityIdDt=="Others")){
			document.getElementById('city').style.display='';
		}
		if ((schName==null || schName=="") && (schId=="Others")){
			document.getElementById('schoolName').style.display='';
		}
		if (prov==null || prov==""){
			document.getElementById('province').style.display='';
		}
		if (cntry==null || cntry==""){
			document.getElementById('country').style.display='';
		}
		if (phone==null || phone==""){
			document.getElementById('phoneNumber').style.display='';
		}
		if (grad==null || grad==""){
			document.getElementById('gradYear').style.display='';
		}
		if (major==null || major==""){
			document.getElementById('major').style.display='';
		}
		if (gpaDt==null || gpaDt==""){
			document.getElementById('gpa').style.display='';
		}
		return false;
		}else{
			return true;
		}
<%}%>
}
function validateEmail(val,id1,id2){
var emailvalid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!val.match(emailvalid) && val!=''){
	document.getElementById(''+id1+'').style.display = '';
	document.getElementById(''+id2+'').style.display = 'none';
}else if(val.match(emailvalid)){
	document.getElementById(''+id1+'').style.display = 'none';
	document.getElementById(''+id2+'').style.display = 'none';
}else if(val==''){
	document.getElementById(''+id1+'').style.display = 'none';
}
}

function validateNumChar(val,id1,id2){
var pattern =/^[0-9]|[a-zA-Z]|[\s]+$/; 
if(!val.match(pattern) && val!=''){
	document.getElementById(''+id1+'').style.display = '';
	document.getElementById(''+id2+'').style.display = 'none';
}else if(val.match(pattern)){
	document.getElementById(''+id1+'').style.display = 'none';
	document.getElementById(''+id2+'').style.display = 'none';
}else if(val==''){
	document.getElementById(''+id1+'').style.display = 'none';
}	
}

function validateCharacter(val,id1,id2){
var validChar =/^[a-zA-Z]|[\s]+$/; 
if(!val.match(validChar) && val!=''){
	document.getElementById(''+id1+'').style.display = '';
	document.getElementById(''+id2+'').style.display = 'none';
}else if(val.match(validChar)){
	document.getElementById(''+id1+'').style.display = 'none';
	document.getElementById(''+id2+'').style.display = 'none';
}else if(val==''){
	document.getElementById(''+id1+'').style.display = 'none';
}
}

function isNumber(isi) {
return !isNaN(isi);
}

function validateNumber(val,id1,id2,name){
var isi =  val;
while (!isNumber(isi)) {
	isi = isi.substring(0, isi.length - 1);
}
document.getElementsByName(name)[0].value = isi;

var numbers =/^[0-9]+$/; 
if(!val.match(numbers) && val!=''){
	document.getElementById(''+id1+'').style.display = '';
	document.getElementById(''+id2+'').style.display = 'none';
}else if(val.match(numbers)){
	document.getElementById(''+id1+'').style.display = 'none';
	document.getElementById(''+id2+'').style.display = 'none';
}else if(val==''){
	document.getElementById(''+id1+'').style.display = 'none';
}
}

function onDataFilled(val, id) {
if (val != '' && id!='') {
	document.getElementById('' + id + '').style.display = 'none';
}
}

function validateForm() {

var idCard = document.forms[0].elements['cModel.idCardNum'].value;
var name = document.forms[0].elements['cModel.fullName'].value;
var date = document.getElementById('birthDate').value;
var emailDt = document.forms[0].elements['cModel.email'].value;
var mobileNum = document.forms[0].elements['cModel.mobileNumber'].value;
var eduLevel = document.forms[0].elements['cModel.educationLevel'].value;
var userIdCardNum = document.getElementById('userIdCard').value;
//	var task = 'checkRegisForUpdate';
var task = 'checkRegistration';
var statusReg = "";

$.ajax({
	type : "POST",
	url : "/WebFinalProject/Candidate.do",
	async : false,
	data : "task=" + task + "&idCardNum=" + idCard+"&userIdCardNum="+userIdCardNum,
	success : function(response) {
		statusReg = response;

			if(statusReg=='0'){
				<%if("candidate".equalsIgnoreCase(usr.getRole())){%>
				document.getElementById('alertCanHasRegistered').style.display = '';
				<%}else{%>
				document.getElementById('alertHasRegistered').style.display = '';
				<%}%>
				return false;
			}
				
	},
	error : function(e) {
		alert('Error: ' + e);
	}
});
if (idCard == null || idCard == "" ||name == null || name == "" ||date == null || date == ""
		||emailDt == null || emailDt == "" ||mobileNum == null || mobileNum == ""||eduLevel == null || eduLevel == "" ||statusReg=='0'){
	if (idCard == null || idCard == "") {
		document.getElementById('idCardNum1').setAttribute("style","display:'';");
	}
	if (name == null || name == "") {
		document.getElementById('fullName').style.display = '';
	}
	if (date == null || date == "") {
		document.getElementById('birthDt').style.display = '';
	}
	if (emailDt == null || emailDt == "") {
		document.getElementById('email').style.display = '';
	}
	if (mobileNum == null || mobileNum == "") {
		document.getElementById('mobileNumber').style.display = '';
	}
	if (eduLevel == null || eduLevel == "") {
		document.getElementById('educationLevel').style.display = '';
	}
	return false;
}else{
	<%if("candidate".equalsIgnoreCase(usr.getRole())){%>
	document.getElementById('alertCanHasRegistered').style.display = 'none';
	<%}else{%>
	document.getElementById('alertHasRegistered').style.display = 'none';
	<%}%>
	return true;	
}
}

function validateValue(val,id1,id2){
var pattern = /[0-9]+\.[0-9]{2}([^0-9]|$)/;
var pattern2 = /^[0-9]{0,3}$/;
if(!val.match(pattern) && val!='' && id1=='isValidGpa'){
	document.getElementById(''+id1+'').style.display = '';
	document.getElementById(''+id2+'').style.display = 'none';
}else if(!val.match(pattern2) && val!='' && id1=='isValidTechScore'){
	if(!val.match(pattern)){
	document.getElementById(''+id1+'').style.display = '';
	document.getElementById(''+id2+'').style.display = 'none';
	}else{
		document.getElementById(''+id1+'').style.display = 'none';
		document.getElementById(''+id2+'').style.display = 'none';
	}
	
}else if(val.match(pattern) && id1=='isValidGpa'){
	if(Math.round(val)<=4){
	document.getElementById(''+id1+'').style.display = 'none';
	document.getElementById(''+id2+'').style.display = 'none';
	}else{
		document.getElementById(''+id1+'').style.display = '';
		document.getElementById(''+id2+'').style.display = 'none';
	}
}else if(val==''){
	document.getElementById(''+id1+'').style.display = 'none';
}
}
</script>
</script>
<%if(session.getAttribute("result") != null)
	{
		String message = session.getAttribute("result").toString();
		%>
			<script type="text/javascript">
				window.alert('<%=message%>');
			</script>
		<%
		session.removeAttribute("result");
	}%> 
</head>
<body onload="javascript:check();">
	<center>
		<table width="100%" class="bodyTable boxShadow">

			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>

			<!-- Content -->
			<tr>
				<td rowspan="5" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td class="headerBox blueBackground leftAlign">
					<%if("candidate".equalsIgnoreCase(usr.getRole())){%>
						Profile Setting > 
						<a href="javascript:flyToPage('profileSetting');">Candidate Information</a> >
						Update Candidate
					<%}else{ %>
						User Management > 
						<a href="javascript:flyToPage('profileSetting');">Manage Candidate</a> > 
						Update Candidate
					<%} %>
				</td>
			</tr>
			<%if("candidate".equalsIgnoreCase(usr.getRole())){%>
			<tr>
			
				<td align="center" id="alertCandidate" class="alert alert-info">
				<!-- <div id="alert" class="alert alert-info"> -->
						<a href="#" class="close" data-dismiss="alert">&times;</a>
	        			<strong>Note!</strong> All data must be completed. Please complete and make sure your data valid.
	    		<!-- </div> -->
	    		</td>
	    	</tr>
	    	<tr>
	    		<td align="center" id="alertCanHasRegistered" class="alert alert-warning">
	    		<a href="#" class="close" data-dismiss="alert">&times;</a>
        			<strong>Warning !</strong>This candidate data has been registered
	    		</td>
				</tr>
	    	<%} %>	    		
	    		<%if("admin".equalsIgnoreCase(usr.getRole())){%>
	    		<tr id="alertAdmin">
					<td align="center" class="alert alert-info">	    		
			    		<a href="#" class="close" data-dismiss="alert">&times;</a>
			        	<strong>Note!</strong> * = required field	    		
		    		</td>
	    		</tr>
	    		<tr id="alertHasRegistered" >
		    		<td align="center" class="alert alert-warning">
		    			<a href="#" class="close" data-dismiss="alert">&times;</a>
	        			<strong>Warning !</strong> This candidate data has been registered
		    		</td>
				</tr>
	    		<tr id="alertAdminAcc">
		    		<td align="center" class="alert alert-info">	    		
		    			<a href="#" class="close" data-dismiss="alert">&times;</a>
		        		<strong>Note!</strong> Please make sure the accepted candidate data must be completed and valid	    		
		    		</td>
	    		</tr>	    		
	    		<%} %>	
			<tr>
				<td align="center" class="contentStyle"><br>
					<html:form action="/Candidate" method="post" enctype="multipart/form-data">
					<html:hidden property="task" name="candidateForm" />
					<html:hidden property="nomor" name="candidateForm" />
					<html:hidden property="lastStatusForm" name="candidateForm" />
					<html:hidden property="cModel.lastStatus" name="candidateForm"/>
					<html:hidden property="cModel.photo" name="candidateForm"/>
					<html:hidden property="cModel.userId" name="candidateForm"/>
					<html:hidden property="selectOtherSchool" name="candidateForm" />
					<html:hidden property="cModel.photoFileName" name="candidateForm"/>
					<html:hidden property="selectOtherSchCity" name="candidateForm" />
					<html:hidden property="selectOtherCity" name="candidateForm" />
					<html:hidden property="cModel.birthDte" name="candidateForm" />
					<html:hidden property="cModel.techTestDate" name="candidateForm" />
						<table align="center" width="80%">
							<tr>
								<td align="center">
									<table width="95%">
										<tr>
											<td align="center" style="vertical-align:middle;">
												<table border="0" class="boxShadow" width="100%">
														<%
															String regNo2=request.getAttribute("regNo2").toString();
															String regNo3=request.getAttribute("regNo3").toString();
															String regNo4=request.getAttribute("regNo4").toString();
															String techTestDate=request.getAttribute("techTestDate").toString();
															String birthDate=request.getAttribute("birthDate").toString();										
														%>
													<tr>
														<td colspan="3" align="center" class="headerBox formHeaderBackground">Update Candidate</td>
													</tr>
													<tr>
														<td colspan="3" align="center">
															<div id="selectedImgDiv"><img alt="" src="" width="151px" height="227px" id="selectedImg"/></div><br>
																<% if(photoPath!=null && uploadPath==null){  %>	
																
																	<div id="selectImgAfterSaveDiv">																
																		<img alt="" src="" width="151px" height="227px" id="selectImgAfterSave" style="display:none;"/>
																	</div>
																	<div id="savedImgDiv">
																		<img alt="" src="<%=photoPath %>" width="151px" height="227px" id="savedImg"/>
																	</div><br>
																<% } else if(photoPath==null && uploadPath==null){ %>
																	<div id="noImgDiv">
																		<img alt="" src="images/no-profile-img.gif" width="151px" height="227px" /><br><br>
																	</div>
																<% } else if(uploadPath!=null){ %>
																	<script type="text/javascript">
																		document.getElementById('selectedImgDiv').style.display='none';
																	</script>
																	<div id="selectImgAfterUploadDiv">
																		<img alt="" src="" width="151px" height="227px" id="selectImgAfterUpload" style="display:none;"/><br>
																	</div>
																	<div id="uploadImgDiv">
																		<img alt="" src="<%=uploadPath %>" width="151px" height="227px" id="uploadImg"/><br>
																	</div>
																<% } %>
															<html:file property="photoFile" name="candidateForm"  onchange="javascript:setSelectedImage();" styleId="photo"/>
																<% if(fileName!=null){ %>
																	&nbsp;&nbsp;Filename :  
																		<input type="text" id="filePhoto" value="<%=fileName%>" readonly="readonly"/>
																		<input type="hidden" value="<%=uploadPath%>" id="pathPhoto"/>
																<% }else{ %>
																	&nbsp;&nbsp;Filename : <html:text property="cModel.photoFileName"  name="candidateForm" styleId="imgName" readonly="true"/>
																<% } %>
																
															<!-- <input type="button" class="buttonStyle" value="Upload" onclick="javascript:flyToPage('uploadPhoto',2);"/> -->
																<span>&nbsp;
																	<table title="upload" class="buttonStyle" style="cursor: pointer;" onclick="javascript:flyToPage('uploadPhoto',2);">
																		<tr>
																			<td style="vertical-align: middle;"><img src="images/uploadButton.png"/></td>
																			<td style="vertical-align: middle;">&nbsp;<b>Upload</b></td>
																		</tr>
																	</table>												
																</span><br>
															<span class="warningText" id="foto">&nbsp; *Please upload photo max. 5 MB, min. 4x6 cm<br></span><br>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign" width="200px">Job Code</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<% if("admin".equalsIgnoreCase(usr.getRole())){ %>
																<html:select property="cModel.jobCode" name="candidateForm" styleClass="comboSmall">
																	<logic:notEmpty name="candidateForm" property="listJob">
																		<html:optionsCollection name="candidateForm" property="listJob" label="jobId" value="jobId" />
																	</logic:notEmpty>
																</html:select>
																<html:select property="cModel.jobCode" name="candidateForm" styleClass="comboMedium">
																	<logic:notEmpty name="candidateForm" property="listBatch">
																		<html:optionsCollection name="candidateForm" property="listBatch" label="batch" value="batch" />
																	</logic:notEmpty>
																</html:select>
															<% }else if("candidate".equalsIgnoreCase(usr.getRole())){ 
		 															String jobCode1=request.getAttribute("jobCode1").toString();
																	String jobCode2=request.getAttribute("jobCode2").toString(); %> 
																<html:text property="cModel.jobCode" name="candidateForm" styleClass="textLarge" readonly="true" value="<%=jobCode1%>"></html:text>
																<html:text property="cModel.jobCode" name="candidateForm" styleClass="textLarge" readonly="true" value="<%=jobCode2%>"></html:text>														
															<% } %>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Reg. No</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<% if("admin".equalsIgnoreCase(usr.getRole())){ %>
																<html:select property="cModel.regNo" name="candidateForm" styleClass="comboSmall">
																	<logic:notEmpty name="candidateForm" property="listJob">
																		<html:optionsCollection name="candidateForm" property="listJob" label="jobId" value="jobId" />
																	</logic:notEmpty>
																</html:select>
																<html:text property="cModel.regNo" maxlength="2" name="candidateForm" styleClass="textSmall" value="<%=regNo2%>"></html:text>
																<html:text property="cModel.regNo" maxlength="2" name="candidateForm" styleClass="textSmall" value="<%=regNo3%>" ></html:text>
																<html:text property="cModel.regNo" maxlength="4" name="candidateForm" styleClass="textSmall" value="<%=regNo4%>" ></html:text>
															<% } else if("candidate".equalsIgnoreCase(usr.getRole())){ %>
															<% String regNo1=request.getAttribute("regNo1").toString(); %>
															    <html:text property="cModel.regNo" maxlength="2" name="candidateForm" styleClass="textSmall" value="<%=regNo1%>"  readonly="true"></html:text>
																<html:text property="cModel.regNo" maxlength="2" name="candidateForm" styleClass="textSmall" value="<%=regNo2%>"  readonly="true"></html:text>
																<html:text property="cModel.regNo" maxlength="2" name="candidateForm" styleClass="textSmall" value="<%=regNo3%>"  readonly="true"></html:text>
																<html:text property="cModel.regNo" maxlength="4" name="candidateForm" styleClass="textSmall" value="<%=regNo4%>"  readonly="true"></html:text>
															<% } %>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">ID Card Number*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.idCardNum" name="candidateForm" onkeyup="javascript:validateNumber(this.value,'idCardNum2', 'idCardNum1','cModel.idCardNum');" maxlength="20"/>
															<span class="warningText" id="idCardNum1">&nbsp; *ID Card number is required</span>	
															<span class="warningText" id="idCardNum2">&nbsp; *ID Card number is invalid e.g valid : 1670309900064</span>			
														</td>
													</tr>
													<tr class="formListBackground">
														<td colspan="3" align="center" class="headerBox formHeaderBackground">Personal Information</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Full Name*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.fullName" name="candidateForm" onkeyup="return validateCharacter(this.value, 'isValidFullName','fullName');" maxlength="100"/>
															<span class="warningText" id="fullName">&nbsp; *Fullname is required</span>
															<span class="warningText" id="isValidFullName">&nbsp; *Fullname is invalid. e.g valid : Jasmine</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Gender</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select property="cModel.gender" name="candidateForm" styleClass="comboMedium" styleId="JK" onchange="return onDataFilled(this.value,'gender');">
																<html:option value="">Select</html:option> 
																<html:option value="M">Male</html:option> 
																<html:option value="F">Female</html:option> 
															</html:select>
															<span class="warningText" id="gender">&nbsp; *Please select gender</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Place of Birth</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.birthPlace" maxlength="20" name="candidateForm" onkeyup="return validateCharacter(this.value, 'isValidBirthPlce','birthPlace');" />
															<span class="warningText" id="birthPlace">&nbsp; *Place of birth is required</span>
															<span class="warningText" id="isValidBirthPlce">&nbsp; *Birth place is invalid e.g valid : Seoul</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Date of Birth*</td>
														<td class="formListStyle" width="10px">:</td>
														<td id="datePicker" class="formListStyle leftAlign">
															<div id="startDatePicker" class="input-append">
													    		<input  type="text" id="birthDate" data-format="dd-MM-yyyy" value="<%=birthDate%>" readonly="readonly"></input>
															    <span class="add-on" style="height:12px; cursor:pointer;">
															    	<i  data-date-icon="icon-calendar"></i>
															    </span>
															</div>
															<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
															<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
															<script type="text/javascript" src="js/bootstrap.min.js"></script>
															<script type="text/javascript">
														      $('#startDatePicker').datetimepicker({
														        format: 'dd-MM-yyyy',
														        endDate: new Date()
														      });
														      
														      $('#birthDatePicker').datetimepicker().on('changeDate', function(e) {
																	document.getElementById('birthDt').style.display = 'none';
																});
														    </script>
														    <span class="warningText" id="birthDt">&nbsp; *Please select birth date</span>		
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Religion</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select property="cModel.religion" name="candidateForm" styleClass="comboMedium" styleId="religion" onchange="return onDataFilled(this.value,'religionDt');">
																<html:option value="">Select</html:option> 
																<html:option value="Moslem">Moslem</html:option>
																<html:option value="Buddha">Buddha</html:option>
																<html:option value="Catholic">Catholic</html:option>
																<html:option value="Protestant">Protestant</html:option>
																<html:option value="Hindu">Hindu</html:option>
															</html:select>
															<span class="warningText" id="religionDt">&nbsp; *Please select religion</span>										
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Marital Status</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
														    <html:select property="cModel.maritalStatus" name="candidateForm" styleClass="comboMedium" styleId="maritalStatus" onchange="return onDataFilled(this.value,'marital');">
																<html:option value="">Select</html:option> 
																<html:option value="Married">Married</html:option>
																<html:option value="Single">Single</html:option>
																<html:option value="Widower">Widower</html:option>
																<html:option value="Widow">Widow</html:option>
															</html:select>
															<span class="warningText" id="marital">&nbsp; *Please select marital status</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Address</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">	
															<html:textarea property="cModel.address" rows="5" style="width:98%;" name="candidateForm" onkeyup="javascript:cekMaxLength('cModel.address',200);" onchange="return onDataFilled(this.value,'address');"/>
															<span class="warningText" id="address">&nbsp; *Please fill out address</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Postal Code</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.postalCode" name="candidateForm"  styleClass="textMedium" maxlength="5" onkeyup="return validateNumber(this.value, 'isValidPostalCode','postalCode','cModel.postalCode');"/>
															<span class="warningText" id="postalCode">&nbsp; *Please fill out postal code</span>
															<span class="warningText" id="isValidPostalCode">&nbsp; *Postal code is invalid. e.g valid : 30139</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">City</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select name="candidateForm" property="cModel.cityId" style="width:200px" styleClass="comboLarge" onchange="javascript:selCity();">
																<html:option value="">=========Select=========</html:option>
																<logic:notEmpty name="candidateForm" property="listCity">
																	<html:optionsCollection name="candidateForm" property="listCity" label="city" value="cityId" />
																</logic:notEmpty>
																<option value="Others" onclick="javascript:selOtherCity();">Others</option>
															</html:select> &nbsp;
															<html:text property="cModel.city" name="candidateForm" styleClass="textMedium" styleId="idCity" maxlength="30" onkeyup="return validateCharacter(this.value, 'isValidCity','city');"></html:text>
															<span class="warningText" id="city">&nbsp; *Please select or fill out city</span>
															<span class="warningText" id="isValidCity">&nbsp; *City is invalid. e.g valid : Jakarta</span>		
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Country</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.country" name="candidateForm"  styleClass="textMedium" maxlength="20" onkeyup="return validateCharacter(this.value, 'isValidCountry','country');"/>
															<span class="warningText" id="country">&nbsp; *Please fill out country</span>
															<span class="warningText" id="isValidCountry">&nbsp; *Country is invalid. e.g valid : Indonesia</span>			
														</td>
													</tr>
													<tr class="formListBackground"> 
														<td class="formListStyle leftAlign">Province</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.province" name="candidateForm" styleClass="textMedium" maxlength="20" onkeyup="return validateCharacter(this.value, 'isValidProvince','province');"/>
															<span class="warningText" id="province">&nbsp; *Please fill out province</span>
															<span class="warningText" id="isValidProvince">&nbsp; *Province is invalid. e.g valid : Sumatera Selatan</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Email*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.email" name="candidateForm" styleClass="textLarge" maxlength="50" onkeyup="return validateEmail(this.value, 'isValidEmail','email');"/>
															<span class="warningText" id="email">&nbsp; *Please fill out email</span>
															<span class="warningText" id="isValidEmail">&nbsp; *Email is invalid. e.g valid : iin_back@yahoo.com</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Phone Number</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.phoneNumber" name="candidateForm" styleClass="textMedium" maxlength="20" onkeyup="return validateNumber(this.value, 'isValidPhone','phoneNumber','cModel.phoneNumber');"/>
															<span class="warningText" id="phoneNumber">&nbsp; *Please fill out phone number</span>
															<span class="warningText" id="isValidPhone">&nbsp; *Phone number is invalid. e.g valid : 0217890002</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Mobile Number*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.mobileNumber" name="candidateForm" styleClass="textMedium" maxlength="20" onkeyup="return validateNumber(this.value, 'isValidMobile','mobileNumber','cModel.mobileNumber');"/>
															<span class="warningText" id="mobileNumber">&nbsp; *Mobile number is required</span>
															<span class="warningText" id="isValidMobile">&nbsp; *Mobile number is invalid. e.g valid : 085275000123</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td colspan="3" align="center" class="headerBox formHeaderBackground">Education Description</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Educational Level*</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select property="cModel.educationLevel" name="candidateForm" styleClass="comboMedium" styleId="educationLevel" onchange="return onDataFilled(this.value, 'educLevel');">
																<html:option value="">Select</html:option> 
																<html:option value="S3">S3</html:option>
																<html:option value="S2">S2</html:option>
																<html:option value="S1">S1</html:option>
																<html:option value="D4">D4</html:option>
																<html:option value="D3">D3</html:option>
																<html:option value="D2">D2</html:option>
																<html:option value="D1">D1</html:option>
																<html:option value="SMU">SMU</html:option>
																<html:option value="SMK">SMK</html:option>
															</html:select>
															<span class="warningText" id="educLevel">&nbsp; *Please select education level</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Graduation Year</td>
														<td class="formListStyle" width="10px">:</td>
													 	<td class="formListStyle leftAlign">
															<html:text property="cModel.gradYear" name="candidateForm"  styleClass="textSmall" maxlength="4" onkeyup="return validateNumber(this.value, 'isValidGradYear','gradYear','cModel.gradYear');"/>
															<span class="warningText" id="gradYear">&nbsp; *Graduation year is required</span>
															<span class="warningText" id="isValidGradYear">&nbsp; *Grad year is invalid. e.g valid : 2013</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">School Name</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:select name="candidateForm" property="cModel.schoolId"  styleClass="comboLarge" onchange="javascript:doComboSchool();">
																<html:option value="">===========Select===========</html:option>
																<logic:notEmpty name="candidateForm" property="listSchoolName">
																	<html:optionsCollection name="candidateForm" property="listSchoolName" label="schoolName" value="schoolId" />
																</logic:notEmpty>
																<option value="Others" onclick="javascript:selOtherSchool();">Others</option>
															</html:select>
															<html:text property="cModel.schoolName" name="candidateForm" styleId="idSchoolName" styleClass="textMedium" maxlength="50" onkeyup="return validateNumChar(this.value, 'isValidSchoolName','schoolName');"/>
															<span class="warningText" id="schoolName">&nbsp; *Please select school name or fill out school name</span>
															<span class="warningText" id="isValidSchoolName">&nbsp; *School name is invalid. e.g valid : National Seoul University</span>	
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">School City</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<div  id="City"></div>
															<html:select name="candidateForm" property="cModel.schoolCityId" styleId="comboSchoolCity"  styleClass="comboMedium" onchange="javascript:selSchoolCity();">
																<html:option value="">=========Select=========</html:option>
																<logic:notEmpty name="candidateForm" property="listCity">
																	<html:optionsCollection name="candidateForm" property="listCity" label="city" value="cityId" />
																</logic:notEmpty>
																<option value="Others" onclick="javascript:selOtherSchoolCity();">Others</option>
															</html:select>
															<input type="text" id="idSchoolCity1" /> 
															<html:text property="cModel.schoolCity" name="candidateForm" styleClass="textMedium" styleId="idSchoolCity2" maxlength="30" onkeyup="return validateCharacter(this.value, 'isValidSchCity','schCity');"/>
															<span class="warningText" id="schCity">&nbsp; *Please select school city or fill out the city</span>
															<span class="warningText" id="isValidSchCity">&nbsp; *School city is invalid. e.g valid : Jakarta</span>	
														</td>	
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Majority</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.majority" name="candidateForm"  styleClass="textMedium" maxlength="50" onkeyup="return validateCharacter(this.value, 'isValidMajor','major');"/>
															<span class="warningText" id="major">&nbsp; *Please fill out majority</span>
															<span class="warningText" id="isValidMajor">&nbsp; *Major is invalid. e.g valid : English Department</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">GPA</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.gpa" name="candidateForm"  styleClass="textSmall" maxlength="6" onkeyup="return validateValue(this.value, 'isValidGpa','gpa');"/>
															<span class="warningText" id="gpa">&nbsp; *Please fill out gpa</span>
															<span class="warningText" id="isValidGpa">&nbsp; *GPA is invalid. e.g valid : 3.95 (GPA max. 4.0)</span>
														</td>
													</tr>
													
												<% if("admin".equalsIgnoreCase(usr.getRole())){ %>
													<tr class="formListBackground">
														<td colspan="3" align="center" class="headerBox formHeaderBackground">Status Update</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Technical Test Place</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.techTestPlace" name="candidateForm"  styleClass="textMedium" maxlength="50" onkeyup="return validateCharacter(this.value, 'isValidTechPlc','');"/>
															<span class="warningText" id="isValidTechPlc">&nbsp; *Technical Place is invalid. e.g valid : BINUS Jakarta</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Technical Test Date</td>
														<td class="formListStyle" width="10px">:</td>
														<td id="datePicker" class="formListStyle leftAlign">
															<div id="techTestDate" class="input-append">
													    		<input  type="text" id="idTechTestDate" data-format="dd-MM-yyyy hh:mm:ss" value="<%=techTestDate%>" readonly="readonly"></input>
															    <span class="add-on" style="height:12px; cursor:pointer;">
															      <i  data-date-icon="icon-calendar"></i>
															    </span>
															</div>
															<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
															<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
															<script type="text/javascript" src="js/bootstrap.min.js"></script>
															<script type="text/javascript">
														      $('#techTestDate').datetimepicker({
														    		maskInput : true
														      });
														    </script>
												   		</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign">Technical Test Score</td>
														<td class="formListStyle" width="10px">:</td>
														<td class="formListStyle leftAlign">
															<html:text property="cModel.techTestScore" name="candidateForm" maxlength="6" styleClass="textSmall" onkeyup="return validateValue(this.value, 'isValidTechScore','');"/>
															<span class="warningText" id="isValidTechScore">&nbsp; *Technical Score is invalid. e.g valid : 85.5</span>
														</td>
													</tr>
													<tr class="formListBackground">
														<td colspan="3" class="formListStyle" align="center">
															<%-- <input id="btnReset" type="button" class="buttonStyle" value="Reset" onclick="javascript:resetCandidate('reset','<bean:write name="candidateForm" property="cModel.userId"/>');"> --%>
															<table title="reset" id="btnReset" class="buttonStyle" style="cursor: pointer;" onclick="javascript:resetCandidate('reset','<bean:write name="candidateForm" property="cModel.userId"/>');">
																<tr>
																	<td style="vertical-align: middle;"><img src="images/resetButton.png"/></td>
																	<td style="vertical-align: middle;">&nbsp;<b>Reset</b></td>
																</tr>
															</table>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign topValign">Status</td>
														<td class="formListStyle topValign" width="10px">:</td>
														<td class="formListStyle leftAlign">  
														    <input type="checkbox" id="1" onclick="javascript:cek();">&nbsp;Technical Test<br>
														    <input type="checkbox" id="2" onclick="javascript:cek();">&nbsp;Interview 1<br>
														    <input type="checkbox" id="3" onclick="javascript:cek();">&nbsp;Interview 2<br>
														    <input type="checkbox" id="4" onclick="javascript:cek();">&nbsp;Interview 3<br>
														    <input type="checkbox" id="5" onclick="javascript:cek();">&nbsp;Accepted<br>
														    <div id="acceptedDiv">
																Choose Batch : 
																<html:select property="cModel.batchId" name="candidateForm" styleClass="textMedium" onchange="return onDataFilled(this.value,'batchId');">
																	<logic:notEmpty name="candidateForm" property="listBatch">
																		<html:optionsCollection name="candidateForm" property="listBatch" label="batch" value="batchId" />
																	</logic:notEmpty>
																</html:select>
																<span class="warningText" id="batchId">Please select batch</span>
															</div>
														</td>
													</tr>
													<tr class="formListBackground">
														<td class="formListStyle leftAlign topValign">Note</td>
														<td class="formListStyle topValign" width="10px">:</td>
														<td class="formListStyle leftAlign">	
															<html:textarea property="cModel.noteAdmin" rows="5" style="width:98%;" name="candidateForm" onkeyup="javascript:cekMaxLength('cModel.noteAdmin',200);"/>	
														</td>
													</tr>
												<% } %>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td>
									<table align="center" style="border-spacing: 3px;">
										<tr>
											<td colspan="2" align="center" class="formListStyle">
												<table title="save" class="buttonStyle" style="cursor: pointer; width:80px;" onclick="javascript:update();">
													<tr>
														<td>&nbsp;&nbsp;</td>
														<td style="vertical-align: middle;"><img src="images/saveButton.png"/></td>
														<td style="vertical-align: middle;">&nbsp;<b>Save</b></td>
													</tr>
												</table>												
											</td>
											<td colspan="2" align="right" class="formListStyle">
												<% if("admin".equalsIgnoreCase(usr.getRole())){ %>
												<table title="cancel" class="buttonStyle" style="cursor: pointer; width:80px;" onclick="javascript:flyToPage('cancel',3);">
												<%}else if("candidate".equalsIgnoreCase(usr.getRole())){ %>
												<table title="cancel" class="buttonStyle" style="cursor: pointer; width:80px;" onclick="javascript:window.history.back();">
												<%} %>
													<tr>
														<td style="vertical-align: middle;"><img src="images/cancelButton.png"/></td>
														<td style="vertical-align: middle;">&nbsp;<b>Cancel</b></td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</html:form>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2014. All Rights Reserved.</td>
			</tr>
		</table>
	</center>
	<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", -1);
%>


</body>  <!-- end of the content body -->
<HEAD> 
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> 
</HEAD> 
</body>
</html>
